<template>
  <el-dialog title="线下打款核对" :visible.sync="isShowModel" :before-close="handleClose" @close="$emit('update:isShowDetail', false)" class="reviewModel" :close-on-click-modal="false">
    <el-form :model="reviewInfo" ref="reviewInfo" label-width="160px" :rules="rules">
      <el-form-item label="核对结果：" required>
        <!--<el-input v-model="reviewInfo.name" autocomplete="off"></el-input>-->
        <el-radio v-model="reviewInfo.status" label="1">通过</el-radio>
        <el-radio v-model="reviewInfo.status" label="0">否决驳回</el-radio>
      </el-form-item>
      <el-form-item label="实际核对金额：" v-if="reviewInfo.status == '1'" required prop="amount">
        <el-input v-model="reviewInfo.amount" placeholder="请输入金额" max="10000000">
          <template slot="append">元</template>
        </el-input>
      </el-form-item>
      <el-form-item label="上传核对凭证：" v-if="reviewInfo.status == '1'" required prop="proof">
        <el-row :gutter="10" >
          <el-col :xs="12" :sm="12" :md="8" :lg="8" :xl="8" v-for="(img, index) in reviewInfo.proof.split(',')" :key="index" v-if="reviewInfo.proof" style="margin-bottom: 50px">
            <div class="imgArea">
              <viewer :images="reviewInfo.proof ? reviewInfo.proof.split(',') : []">
                <div>
                  <img :src="reviewInfo.proof.split(',')[index]">
                </div>
              </viewer>
              <div class="operateBtn">
                <el-button size="small" type="text" @click="deleteOtherImg(index)">删除</el-button>
              </div>
            </div>
          </el-col>
        </el-row>
        <div v-if="!reviewInfo.proof || (reviewInfo.proof && reviewInfo.proof.split(',').length < 5)">
          <el-button type="primary" @click="showCropper">上传图片</el-button>
          <p>文件不能超过5MB</p>
        </div>
      </el-form-item>
      <el-form-item label="驳回原因：" v-if="reviewInfo.status == '0'" required prop="reason">
        <el-input type="textarea" v-model="reviewInfo.reason " placeholder="驳回原因（800字一下）" :autosize="{ minRows: 6, maxRows: 8}" max="800"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeModel">取 消</el-button>
      <el-button type="primary" @click="submitForm" v-if="reviewInfo.status">确 定</el-button>
    </div>
    <jxf-cropper
      :uploadUrl="upload"
      :isShowCropper.sync="isShowCropper"
      :tCropWidth="tCropWidth"
      :tCropHeight="tCropHeight"
      :dealImage.sync="dealImage"
      @getChangedImage="getChangeImage"
      :dataSize="5"></jxf-cropper>
  </el-dialog>
</template>

<script>
    export default {
        name: "OfflinePaymentReview",
        props: {
          isShowDetail: {
            type: Boolean,
            default: false
          },
          dataInfo: {
            type: Object,
            default: () => {}
          }
        },
        data() {
          return {
            // 裁剪
            isShowCropper: false,
            tCropWidth: 800,
            tCropHeight: 800,
            dealImage: '',
            /***********/
            reviewInfo: {
              status: "",
              amount: "",
              proof: "",
              reason: ""
            },
            fileList: [],
            rules: {
              amount: [
                { required: true, message: '请输入实际核对金额', trigger: ['blur', 'change'] },
              ],
              reason: [
                { required: true, message: '请输入审核原因', trigger: ['blur', 'change'] },
              ],
              proof: [
                { required: true, message: '图片凭证不能为空', trigger: ['change', 'blur'] },
              ]
            },
            header: {
              token: JSON.parse(window.localStorage.adminLogin).token
            } ,
            upload: apis.operate.advUpload ,
            dialogImageUrl: '',
            dialogVisible: false,
            isShowModel: this.isShowDetail
          }
        },
        methods: {
          /******/
          showCropper() {
            this.dealImage = '';
            this.isShowCropper = true;
          },
          getChangeImage(val) {
            if(this.reviewInfo.proof) {
              this.reviewInfo.proof = this.reviewInfo.proof + ',' + val;
            } else {
              this.reviewInfo.proof = val
            }
          },
          /******/
          // 关闭弹框前
          handleClose(done) {
            this.resetForm()
            done()
          },
          closeModel() {
            this.resetForm()
            this.$emit('update:isShowDetail', false)
          },
          resetForm() {
            this.reviewInfo.status = ""
            this.$refs['reviewInfo'].resetFields()
          },
          handleRemove(file, fileList) {

          },
          deleteOtherImg(index) {
            let array = this.reviewInfo.proof.split(',');
            if(this.reviewInfo.proof && this.reviewInfo.proof.split(',')) {
              array.splice(index, 1)
              this.reviewInfo.proof = array.join(',')
            }
          },
          submitForm() {
            let data;
            if(this.reviewInfo.status == "1") {
              data = {
                id: this.dataInfo.id,
                proof: this.reviewInfo.proof,
                amount : this.reviewInfo.amount
              }
              this.$refs['reviewInfo'].validate((valid) => {
                if(valid) {
                  ajax.post(apis.finance.passRecharge, data).then(res => {
                    if(res.code == "10000000") {
                      this.$message({
                        type: 'success',
                        message: '审核成功'
                      });
                      this.$emit('fresh')
                      this.closeModel()
                    } else {
                      this.$message.error(res.message)
                    }
                  })
                }
              })
            } else {
              data = {
                id: this.dataInfo.id,
                reason : this.reviewInfo.reason
              }
              this.$refs['reviewInfo'].validate((valid) => {
                if(valid) {
                  ajax.post(apis.finance.rejectRecharge, data).then(res => {
                    if(res.code == "10000000") {
                      this.$message({
                        type: 'success',
                        message: '驳回成功'
                      });
                      this.$emit('fresh')
                      this.closeModel()
                    } else {
                      this.$message.error(res.message)
                    }
                  })
                }
              })
            }
          }
        },
        watch: {
          isShowDetail(val) {
            this.isShowModel = val
          }
        }
    }
</script>

<style lang="scss">
  .reviewModel {
    .el-dialog {
      width: 600px;
    }
    .el-upload-list__item {
      display: none;
    }
    .el-upload--picture-card {
      margin-top: 10px;
    }
    .imgArea {
      width: 120px;
      height: 120px;
      border: 1px solid #f2f2f2;
      img {
        margin: 5px;
        width: 110px;
        height: 110px;
      }
      .operateBtn {
        margin-top: -15px;
        padding: 0 5px;
        width: 110px;
        border: 1px solid #f2f2f2;
      }
    }
  }
</style>
